<!-- 页面 -->
<template>
	<s-layout navbar="custom">
		<view class="tiku-wrong">
			<view class="tiku-wrong-btn" @tap="goWrongAnsweredQuestions">我的错题</view>
		</view>
		<s-tiku-category @update:selected="handleCategoryChange" content_type="tiku" :isTk="false" />

		<s-empty v-if="state.tikuList.length === 0" icon="/static/order-empty.png" text="暂无题库"></s-empty>
		<view v-else>


			<view class="tiku-content">
				<view class="tiku-card-box ss-r-10 ss-m-t-10" v-for="item in state.tikuList" :key="item.id">
					<view class="ss-order-card-warp" @tap="onOpenTiku(item)">
						<view class="img-box ss-m-r-24">
							<image class="order-img" src="/static/images/zjxt.png" mode="widthFix" width="25"></image>
						</view>
						<view class="box-right ss-flex-col ss-row-between">
							<view class="title ss-line-2">{{ item.title }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</s-layout>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue';
	import sheep from '@/sheep';
	import _ from 'lodash';

	const emit = defineEmits(['tikuDetail'])

	// 数据
	const state = reactive({
		tikuList: [],
		loadStatus: '',
		accuracy: 0,
		total_count: 0,
		category1: undefined,
		category2: undefined,
		tiku_type: undefined,
	});

	const goWrongAnsweredQuestions = () => {
		sheep.$router.go('https://weike.jhpress.com/tk/#/pages/wrong/index')
		// sheep.$router.go('http://localhost:8080/h5/tk/#/pages/wrong/index')
	}

	const handleCategoryChange = (selection) => {
		state.category1 = selection.category1;
		state.category2 = selection.category2;
		state.tiku_type = selection.tikutype;
		getTikuList();
	}


	// 获取题库列表
	async function getTikuList() {
		state.loadStatus = 'loading';
		let res = await sheep.$api.tiku.getTikuByUser({
			category1: state.category1,
			category2: state.category2,
			tiku_type: state.tiku_type,
		});
		state.error = res.error;
		if (res.code === 1) {
			state.tikuList = res.data;
		}
	}

	// 获取题库列表
	async function getUserZql() {
		let res = await sheep.$api.tiku.getTikuUserInfo();
		if (res.code === 1) {
			state.total_count = res.data.totalTotalCount;
			state.accuracy = res.data.accuracy;
		}
	}

	onMounted(async () => {
		getTikuList();
	});

	//打开题库详情
	function onOpenTiku(item) {
		emit('tikuDetail', {
			id: item.content_id,
			goods_id: item.id
		})
	}
</script>

<style lang="scss" scoped>
	.tiku-content {
		.tiku-card-box {
			margin-top: 10px;
			background-color: #FFFFFF;
			margin: 10px;
			border-radius: 8px;
		}
	}

	.tiku-wrong {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		margin-bottom: 34px;
		margin-top: -42px;
		cursor:pointer;
	}

	.tiku-wrong-btn {
		width: 110px;
		height: 40px;
		line-height: 40px;
		text-align: center;
		background-color: #ff6000;
		border-radius: 4px;
		color: #fff;
	}

	.ss-order-card-warp {
		display: flex;
		align-items: center;
		padding: 24rpx;

		&:hover {
			background-color: #f6f6f6;
			cursor: pointer;
		}

		.img-box {
			width: 40px;
			height: 40px;
			border-radius: 10rpx;
			overflow: hidden;

			.order-img {
				width: 100%;
				height: 100%;
			}
		}

		.box-right {
			flex: 1;
			position: relative;
		}

		.title {
			font-size: 18px;
			line-height: 40rpx;
		}
	}

	:deep(.uni-tooltip-popup) {
		background: var(--ui-BG);
	}

	.warning-color {
		color: #faad14;
	}

	.danger-color {
		color: #ff3000;
	}

	.success-color {
		color: #52c41a;
	}

	.info-color {
		color: #999999;
	}
</style>